<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 500px;
        height: 300px;
        border: 1px solid #0a3b98;
        /* position: relative; */
        display: flex;
        justify-content: center;
        /* align-items: flex-start; */
        /* align-items: center; */
      }
      .son {
        /* width: 100px;
        height: 40px; */
        background: #f0a238;
        /* 
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto; */
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son">123</div>
    </div>
  </body>
  <script>
    function cloneObj(obj) {
      let newObj = {}
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          newObj[key] = obj[key]
        }
      }
      return newObj
    }
    let obj = {
      name: 'zhen',
      age: '28',
      info: {
        add: 'add',
        phone: '183',
      },
    }
    let obj2 = cloneObj(obj)
    // console.log('obj2==', obj2)
    // obj2.info.add = 'ccc'
    // console.log('obj2==', obj2)
    // console.log('obj==', obj)

    var fxObj = {
      age: 18,
      nature: ['smart', 'good'],
      names: {
        name1: 'fx',
        name2: 'xka',
      },
      love: function () {
        console.log('fx is a great girl')
      },
    }
    var newObj = Object.assign({}, fxObj)
    console.log('newObj', newObj)
    newObj.age = 28

    newObj.names.name1 = 'name1'
    console.log('newObj', newObj)
    console.log('fxObj', fxObj)
    const names = {
      name1: 'fx',
      name2: 'xka',
    }
    const fxArr = ['One', 'Two', 'Three', names]
    const fxArrs = fxArr.slice(0)
    // fxArrs[3].name1 = 'name1111'
    fxArrs[3] = 'love'
    console.log(fxArr) // ["One", "Two", "Three"]
    console.log(fxArrs) // ["One", "love", "Three"]
  </script>
</html>
